<template>
  <div class="login-page">
    <div>这是登录页</div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "login",
  components: {},
  computed: {
    ...mapState({
      isLogin: (state) => state.user.isLogin,
    }),
  },
  created() {
    // 获取用户名密码
    alert(JSON.stringify(this.$route.query));
    this.LoginMock(this.$route.query);
  },
  methods: {
    ...mapActions(["Login","LoginMock"]),
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      // 通过 `vm` 访问组件实例
      if (vm.isLogin) {
        // vm.$router.replace({ path: "/home" });
      }
    });
  },
};
</script>
<style lang="less" scoped>
.login-page {
  .mid_box {
    height: 480px;
    background: linear-gradient(-45deg, #f4484b, #fcaa73);
    .content {
      position: relative;
      width: @screenwidth;
      margin: auto;
      height: 100%;
      .bg_img {
        position: absolute;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        top: 50%;
        margin-left: 20px;
        width: 525px;
        height: 379px;
      }
      .login_box {
        background: #ffffff;
        width: 340px;
        position: absolute;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        top: 50%;
        right: 8%;
      }
    }
  }
}
</style>

